<template>
	<view>
		<u-navbar title="账户充值" :autoBack="false" @leftClick="back"></u-navbar>
		<view class="first-content">
			<view class="">
				<view class="" style="font-size: 36rpx; line-height: 40rpx">
					{{ $z.$t("账户余额（元）") }}
				</view>
				<view class="" style="font-size: 70rpx; line-height: 100rpx; height: 100rpx">
					{{ USearch.je ? USearch.je / 100 : "" }}
				</view>
			</view>
		</view>
		<u-notice-bar ref="noticebar" direction="row" :text="blsj"></u-notice-bar>
		<view class="recharge-content">
			<u-button type="primary" :plain="true" v-for="(item, index) in ChargeYH"
				:custom-style="{ color: '#2093f5', ...rechargeitem }" @click="recharge(item)" :hairline="true">
				<view class="" style="font-size: 30rpx">
					{{ $z.$t(`${item.je / 100}元`) }}
				</view>
				<view class="" v-if="ChargeYHtext2(item) != ''">
					{{ $z.$t(ChargeYHtext2(item)) }}
				</view>
			</u-button>
		</view>
		<zmodal ref="zmodal"></zmodal>
	</view>
</template>

<script>
	import qs from "qs";

	export default {
		data() {
			return {
				ChargeYH: [],
				query: {},
				umodaldata: {},
				rechargeitem: {},
				pageUrl: "",
			};
		},
		onLoad(queryload) {
			let locationquery = {};
			// #ifdef H5
			locationquery = window.location.search;
			locationquery = locationquery.replace("?", "");
			// #endif

			let query = qs.parse(locationquery);

			this.query = {
				...queryload,
				...query,
			};
			this.getdata();
		},
		computed: {
			blsj() {
				if (uni.$z.IsWeixinOrAlipay() == "weixin") {
					return this.$z.$t(
						"微信充值六个月内退款不收手续费，超出六个月收千分之六手续费。"
					);
				} else {
					return this.$z.$t(
						"支付宝充值三个月内退款不收手续费，超出三个月收千分之六手续费。"
					);
				}
			},
			USearch() {
				return this.$store.state.user.USearch;
			},
		},
		mounted() {
			this.rechargeitem = {
				height: "110rpx",
				width: "200rpx",
				padding: "0",
				margin: "20rpx 0",
				display: "flex”",
				flexDirection: "column",
				lineHeight: "1",
				justifyContent: "space-around",
				padding: "20rpx 0",
				fontSize: "24rpx",
				borderRadius: "8rpx",
				background: "none"
			};
			// this.$refs.noticebar && this.$refs.noticebar.initSize();
		},
		onShow() {

		},
		methods: {
			async back() {
				let shequ = getCurrentPages();
				if (shequ.length >= 2) {
					let prevShequ = shequ[shequ.length - 2];
					prevShequ.backdata = {
						type: "recharge",
					};
				}
				this.$z.back();
			},
			async getdata() {
				if (this.query.fk == "1") {
					this.pageUrl = `/wxhtml/ChargeCarsys/${
            this.query.page
          }.html?${qs.stringify(this.query)}`;
				}
				await this.$store.dispatch("user/getuser");
				// area 4
				let reqdata = {};
				// #ifdef MP-HT
				reqdata = {
					area: 47,
				};
				// #endif
				let ChargeYH = await uni.$z.request("/ChargeYH", reqdata);
				ChargeYH.sort((a, b) => {
					if (Number(a.lx) == 3) {
						return 1;
					} else if (Number(b.lx) == 3) {
						return -1;
					} else {
						return 0;
					}
				});
				// #ifdef MP-WEIXIN&&!MP-HT
				ChargeYH = ChargeYH.slice(0, 4);
				// #endif

				this.ChargeYH = ChargeYH;
			},

			ChargeYHtext2(item) {
				let str = "";
				if (item.lx == 1) {
					str = this.$z.$t(`送${item.pari1}积分`);
				} else if (item.lx == 2) {
					let jexs = Number(item.je) + Number(item.pari1);
					str = this.$z.$t(`充${item.je / 100}得${jexs / 100}`);
				} else if (item.lx == 3) {
					let jexs = Number(item.je) + Number(item.pari1);
					str = this.$z.$t(`充${item.je / 100}送设备`);
				} else if (item.lx == 4) {
					str = this.$z.$t(`优惠劵`);
				} else if (item.lx == 5) {
					let jexs = Number(item.je) - Number(item.pari1);
					str = `${this.$z.$t(`售价`)}${jexs / 100}`;
				}
				return str;
			},
			async recharge(item) {
				let zfdata = {
					id: item.id,
				};
				let shequ = getCurrentPages();
				if (shequ.length >= 2) {
					shequ = shequ[shequ.length - 2];
					zfdata.pageUrl =
						`${window.location.pathname}#${shequ.route}?${qs.stringify(shequ.options)}`
					console.log('zfdata.pageUrl', zfdata.pageUrl);
				}
				zfdata.je = item.je;
				if (item.lx == 5) {
					zfdata.je = Number(item.je) - Number(item.pari1);
				}
				if (uni.$z.IsWeixinOrAlipay() != "wxym") {
					if (this.query.gtel) {
						zfdata.par = `gtel=${this.query.gtel}#td=${this.query.td}`;
					}
					zfdata.uUser = this.USearch.uUser;
				}
				let payType = "";
				// #ifdef MP-ALIPAY
				payType = "3";
				//#endif
				// #ifdef H5
				payType = this.$z.IsWeixinOrAlipay() == "weixin" ? "0" : "1";
				//#endif

				uni.$z
					.pay({
							weixin: "/WXCZxd",
							zfb: "/AlipayCZ",
						},
						zfdata
					)
					.then(async () => {
						this.back();
					});
			},
		},
	};
</script>

<style lang="scss">
	.first-content {
		background: #1f93f5;
		padding: 22rpx 30rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.recharge-content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 40rpx;

		&::after {
			content: "";
			width: 200rpx;
		}
	}

	.rechargeitem {
		color: $uni-color-primary;
		height: 110rpx;
		width: 200rpx;
		padding: 0;
		margin: 20rpx 0;
		display: flex;
		flex-direction: column;
		line-height: 1;
		justify-content: space-around;
		padding: 20rpx 0;
		font-size: 24rpx;
	}
</style>